import { graphql } from 'gatsby';

import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';

import ButtonActive from '../../examples/Button/Active';
import ButtonBlock from '../../examples/Button/Block';
import ButtonDisabled from '../../examples/Button/Disabled';
import ButtonLoading from '../../examples/Button/Loading';
import ButtonOutlineTypes from '../../examples/Button/OutlineTypes';
import ButtonSizes from '../../examples/Button/Sizes';
import ButtonTagTypes from '../../examples/Button/TagTypes';
import ToggleButton from '../../examples/Button/ToggleButton';
import ToggleButtonGroupControlled from '../../examples/Button/ToggleButtonGroupControlled';
import ToggleButtonGroupUncontrolled from '../../examples/Button/ToggleButtonGroupUncontrolled';
import ButtonTypes from '../../examples/Button/Types';

# Buttons

<p className="lead">
  Custom button styles for actions in forms, dialogs, and more with
  support for multiple sizes, states, and more.
</p>

## Examples

Use any of the available button style types to quickly create a styled
button. Just modify the `variant` prop.

<ReactPlayground codeText={ButtonTypes} />

### Outline buttons


For a lighter touch, Buttons also come in `outline-*`
variants with no background color.

<ReactPlayground codeText={ButtonOutlineTypes} />

## Button tags

Normally `<Button>` components will render a HTML
`<button>` element. However you can render whatever you'd
like, adding a `href` prop will automatically render an
`<a />` element. You can use the `as` prop to
render whatever your heart desires. React Bootstrap will take care of
the proper ARIA roles for you.

<ReactPlayground codeText={ButtonTagTypes} />

## Sizes

Fancy larger or smaller buttons? Add `size="lg"`,
`size="sm"` for additional sizes.

<ReactPlayground codeText={ButtonSizes} />


Create block level buttons—those that span the full width of a parent—by
adding `block`

<ReactPlayground codeText={ButtonBlock} />

## Active state


To set a button's active state simply set the component's
`active` prop.

<ReactPlayground codeText={ButtonActive} />

### Disabled state

Make buttons look inactive by adding the `disabled` prop to.

<ReactPlayground codeText={ButtonDisabled} />

Watch out! `<a>` elements don't naturally support a
`disabled` attribute. In browsers that support it this is handled with a
`point-events: none` style but not all browsers support it
yet.

React Bootstrap will prevent any `onClick` handlers from
firing regardless of the rendered element.

## Button loading state

When activating an asynchronous action from a button it is a good UX
pattern to give the user feedback as to the loading state, this can
easily be done by updating your `<Button />`s
props from a state change like below.

<ReactPlayground codeText={ButtonLoading} />

## Checkbox / Radio

Buttons can also be used to style `checkbox` and
`radio` form elements. This is helpful when you want a toggle
button that works neatly inside an HTML form.

<ReactPlayground codeText={ToggleButton} />

The above handles styling, But requires manually controlling the
`checked` state for each radio or checkbox in the group.


For a nicer experience with checked state management use the
`<ToggleButtonGroup>` instead of a `<ButtonGroup toggle>` component.
The group behaves as a form component, where the `value` is an array of the selected
`value`s for a named checkbox group or the single toggled
`value` in a similarly named radio group.

#### Uncontrolled

<ReactPlayground codeText={ToggleButtonGroupUncontrolled} />

#### Controlled

<ReactPlayground codeText={ToggleButtonGroupControlled} />

## API

<ComponentApi metadata={props.data.Button} />
<ComponentApi metadata={props.data.ToggleButtonGroup} />
<ComponentApi metadata={props.data.ToggleButton} />


export const query = graphql`
  query ButtonQuery {
    Button: componentMetadata(displayName: { eq: "Button" }) {
      displayName
      ...ComponentApi_metadata
    }
    ToggleButtonGroup: componentMetadata(
      displayName: { eq: "ToggleButtonGroup" }
    ) {
      displayName
      ...ComponentApi_metadata
    }
    ToggleButton: componentMetadata(displayName: { eq: "ToggleButton" }) {
      displayName
      ...ComponentApi_metadata
    }
  }
`;
